<template>
  <div class="header">
    <el-dropdown class="setting" v-if="name">
      <div>
        <img src="@/assets/user-icon.png" class="u13" />
        <span>{{name}}</span>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>
         <span @click="updatePasswordFun">修改密码</span>
        </el-dropdown-item>
        <el-dropdown-item >
          <span @click="loginoutConfirm">退出登录</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <UpdatePassword :isShow.sync="isShow"/>
<!--    <AddressEdit> </AddressEdit>-->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import {removeToken} from "@/utils/auth";
import {handleCofirm} from "@/utils";
import UpdatePassword from "@/components/UpdatePassword.vue";
import AddressEdit from "@/components/AddressEdit.vue";
@Component({
  components: {AddressEdit, UpdatePassword}
})
export default class HomeView extends Vue {
  private name = '';
  private isShow = false;
  created() {
    const userInfoVO = JSON.parse(localStorage.getItem("userInfo") as string);
    this.name = userInfoVO ? userInfoVO.name : "";
  }

  // 修改密码
  updatePasswordFun(): void {
    this.isShow = true
  }

  // 推出登录
  loginoutConfirm() {
    handleCofirm("确定要退出登录嘛?")
        .then(() => {
          this.logout();
        })
        .catch(() => {
          this.$message("取消退出");
        });
  }

  logout() {
    this.$api.common.loginOutApi().then(res => {
      if (res.status === 200) {
        removeToken ()
        localStorage.removeItem("userInfo");
        this.$message.success(`退出成功`);
        this.$router.replace('/login');
      }
    });
  }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
// @import url("//at.alicdn.com/t/font_1821700_5py9ek9umom.css");
.header {
  position: fixed;
  right: 0;
  z-index: 9;
  width: calc(100vw - 220px);
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  padding-right: 50px;
  box-sizing: border-box;
  box-shadow: 0 5px 10px -5px #ccc;
  background-color: #fff;
  box-sizing: border-box;
  div {
    margin-left: 10px;
    span {
      vertical-align: middle;
    }
    .u19 {
      width: 23px;
      vertical-align: middle;
      margin-right: 10px;
    }
    .u13 {
      width: 30px;
      vertical-align: middle;
      margin-right: 10px;
    }
    .dropOut {
      font-size: 24px;
      display: inline-block;
      margin-left: 50px;
      vertical-align: middle;
    }
  }
  .divider {
    width: 1px;
    height: 15px;
    background-color: #ccc;
    margin-left: 10px;
  }
}
</style>